<template>
    <div class="incdec">
        <div class="rili-area">
            <el-card shadow="always">
                <div style="display: flex;">
                    <el-date-picker v-model="value1" type="month" placeholder="选择日期">
                    </el-date-picker>
                    <span style="width: 15px;"></span>
                    <template>
                        <download-excel :data="tableData1" :fields="json_fields" :header="title" name="增减人员信息表.xls">
                            <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                            <el-button type="primary">导出</el-button>
                        </download-excel>
                    </template>
                </div>
            </el-card>
        </div>
        <div class="sel-area">
            <el-button plain autofocus @click="changeStatus('全部')">
                <template>
                    <div class="cont-area">
                        <div class="num-area">10人</div>
                        <div class="status-area">全部</div>
                    </div>
                </template>
            </el-button>
            <el-button plain @click="changeStatus('已参保')">
                <template>
                    <div class="cont-area">
                        <div class="num-area">4人</div>
                        <div class="status-area">已参保</div>
                    </div>
                </template>
            </el-button>
            <el-button plain @click="changeStatus('待参保')">
                <template>
                    <div class="cont-area">
                        <div class="num-area">3人</div>
                        <div class="status-area">待参保</div>
                    </div>
                </template>
            </el-button>
            <el-button plain @click="changeStatus('待停保')">
                <template>
                    <div class="cont-area">
                        <div class="num-area">2人</div>
                        <div class="status-area">待停保</div>
                    </div>
                </template>
            </el-button>
            <el-button plain @click="changeStatus('已停保')">
                <template>
                    <div class="cont-area">
                        <div class="num-area">1人</div>
                        <div class="status-area">已停保</div>
                    </div>
                </template>
            </el-button>
        </div>
        <div class="tab-area">
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <div slot="header">
                    <span>增减人员</span>
                </div>
                <el-table ref="multipleTable" :data="tableDataShow" stripe
                    :header-cell-style="{ background: '#f5f7f9', borderTop: '1px solid #ebeef5', textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }" style="width: 100%">
                    <el-table-column type="selection" width="60px">
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60px">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120px">
                    </el-table-column>
                    <el-table-column prop="bumen" label="部门" width="120px">
                    </el-table-column>
                    <el-table-column prop="zhiwei" label="岗位" width="120px">
                    </el-table-column>
                    <el-table-column prop="tel" label="手机号" width="'20%'">
                    </el-table-column>
                    <el-table-column prop="gonghao" label="工号" width="'20%'">
                    </el-table-column>
                    <el-table-column prop="zhengjian" label="证件号" width="'20%'">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100px">
                    </el-table-column>
                    <el-table-column label="操作" width="360px">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" v-if="scope.row.status === '待参保'">办理增员</el-button>
                                <el-button type="text" v-if="scope.row.status === '待停保'">办理减员</el-button>
                                <el-button type="text" v-if="scope.row.status === '已参保'">调整</el-button>
                                <el-button type="text" v-if="scope.row.status === '已参保'">停保</el-button>
                                <el-button type="text"
                                    v-if="scope.row.status === '已参保' && scope.row.taizhang === '0'">加入台账</el-button>
                                <el-button type="text"
                                    v-if="scope.row.status === '已参保' && scope.row.taizhang === '1'">移出台账</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24" :style="{ textAlign: 'right' }">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage4" layout="total, prev, pager, next"
                            :total="this.tableDataShow.length">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-card>

        </div>
    </div>
</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            title: "增减人员信息表",
            json_fields: {
                // 序号: "index",
                姓名: "name",
                部门: "bumen",
                岗位: "zhiwei",
                手机号: "tel",
                工号: "gonghao",
                证件号:"zhengjian",
                在职状态: "emptype",
                参保状态: "status",
                社保方案: "planname",
                台账: "taizhang",
                社保基数: "shenbaojishu",
                // 状态: "complete",
            },
            value1: new Date(),
            autofocus: true,
            tableData1: [
                {
                    id: 1,
                    name: '莫俏丽',
                    bumen: '项目部',
                    zhiwei: '项目经理',
                    status: '已参保',
                    taizhang: '0',
                    tel: 13714046148,
                    gonghao: 'GH2022011005',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案一',
                    shenbaojishu: 5869,
                }, {
                    id: 2,
                    name: '令云心',
                    bumen: '产品部',
                    zhiwei: '项目经理',
                    tel: 19893995896,
                    status: '已参保',
                    taizhang: '0',
                    gonghao: 'GH2022011006',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案二',
                    shenbaojishu: 5869,
                }, {
                    id: 3,
                    name: '堂安春',
                    bumen: '人力资源部',
                    zhiwei: '人事总监',
                    taizhang: '1',
                    status: '已参保',
                    tel: 15083709763,
                    gonghao: 'GH2021011007',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案三',
                    shenbaojishu: 5869,
                }, {
                    id: 4,
                    name: '笃水瑶',
                    bumen: '设计部',
                    zhiwei: '项目经理',
                    taizhang: '1',
                    status: '已参保',
                    tel: 15053222627,
                    gonghao: 'GH2021011008',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案四',
                    shenbaojishu: 5869,
                }, {
                    id: 5,
                    name: '野依云',
                    bumen: '财务部',
                    zhiwei: '财务总监',
                    taizhang: '0',
                    status: '待参保',
                    tel: 13669997085,
                    gonghao: 'GH2021011009',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案五',
                    shenbaojishu: 5869,
                }, {
                    id: 6,
                    name: '戈元冬',
                    bumen: '销售部',
                    zhiwei: '销售经理',
                    taizhang: '0',
                    status: '待参保',
                    tel: 15080525797,
                    gonghao: 'GH2020011010',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案一',
                    shenbaojishu: 5869,
                }, {
                    id: 7,
                    name: '闽飞昂',
                    bumen: '行政部',
                    zhiwei: '行政总监',
                    taizhang: '0',
                    status: '待参保',
                    tel: 17882152912,
                    gonghao: 'GH2020011011',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案二',
                    shenbaojishu: 5869,
                }, {
                    id: 8,
                    name: '闾丘易文',
                    bumen: '人力资源部',
                    zhiwei: '人事副总监',
                    taizhang: '0',
                    status: '待停保',
                    tel: 15725901968,
                    gonghao: 'GH2019011012',
                    zhengjian: 'SFZ20213544',
                    emptype: '正式',
                    planname: '社保方案三',
                    shenbaojishu: 5869,
                }, {
                    id: 9,
                    name: '曲嘉祥',
                    bumen: '财务部',
                    zhiwei: '财务副总监',
                    taizhang: '0',
                    status: '待停保',
                    tel: 13815204688,
                    gonghao: 'GH2019011013',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    planname: '社保方案四',
                    shenbaojishu: 5869,
                }, {
                    id: 10,
                    name: '连昌',
                    bumen: '销售部',
                    zhiwei: '销售经理',
                    taizhang: '0',
                    status: '已停保',
                    tel: 15286179282,
                    gonghao: 'GH2019011014',
                    zhengjian: 'SFZ20213544',
                    emptype: '试用',
                    planname: '社保方案五',
                    shenbaojishu: 5869,
                },
            ],
            tableDataShow: [],
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.tableDataShow = this.tableData1;
        this.autofocus = true
        this.changeStatus('全部')
    },
    methods: {
        changeStatus(value) {
            if (value == '全部') {
                this.tableDataShow = this.tableData1
            } else if (value == '已参保') {
                this.tableDataShow = this.tableData1.filter(item => item.status === '已参保')
            } else if (value == '待参保') {
                this.tableDataShow = this.tableData1.filter(item => item.status === '待参保')
            } else if (value == '待停保') {
                this.tableDataShow = this.tableData1.filter(item => item.status === '待停保')
            } else if (value == '已停保') {
                this.tableDataShow = this.tableData1.filter(item => item.status === '已停保')
            }
        }
    }
};
</script>
<style lang='less'>
.incdec {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: #f5f7f9;

    .sel-area {
        margin: 20px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-button {
            width: 18%;
            height: 150px;
            box-sizing: border-box;

            .cont-area {
                height: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;

                .num-area {
                    font-size: 32px;
                }

                .status-area {
                    font-size: 20px;
                }
            }
        }
    }
}
</style>